import React, { useEffect, useState } from "react";

import { Button, Descriptions, Card, Row, Col } from "antd";
import { useParams } from "react-router-dom";
import { getHospitalDetailRequest } from "@/api/hospital/hospitalList";
import { hospitalDetailType } from "@/api/hospital/model/hospitalListTypes";
export default function HospitalShow() {
  const { id } = useParams();
  const [hosDetailData, setHosDetailData] = useState<hospitalDetailType>();

  useEffect(() => {
    const getHosDetail = async () => {
      const re = await getHospitalDetailRequest(id as string);
      setHosDetailData(re);
    };
    getHosDetail();
  }, []);

  return (
    <div>
      <Card>
        <Descriptions
          column={2}
          bordered
          title="基本信息"
          // size={size}
        >
          <Descriptions.Item label="医院名称">
            {hosDetailData?.hospital.hosname}
          </Descriptions.Item>
          <Descriptions.Item label="医院Logo">
            {hosDetailData?.hospital.logoData ? (
              <img
                width={200}
                src={`data:image/jpeg;base64,${hosDetailData.hospital?.logoData}`}
              ></img>
            ) : (
              ""
            )}
          </Descriptions.Item>
          <Descriptions.Item label="医院编号">
            {hosDetailData?.hospital.hoscode}
          </Descriptions.Item>

          <Descriptions.Item label="医院地址">
            {hosDetailData?.hospital.address}
          </Descriptions.Item>
          <Descriptions.Item label="医院坐车路线" span={2}>
            {hosDetailData?.hospital.route}
          </Descriptions.Item>
          <Descriptions.Item label="医院简介" span={2}>
            {hosDetailData?.hospital.intro}
          </Descriptions.Item>
        </Descriptions>

        <Descriptions
          column={2}
          bordered
          title="预约规则信息"
          style={{ marginTop: 20 }}
          // size={size}
        >
          <Descriptions.Item label="预约周期">
            {hosDetailData?.bookingRule.cycle}
          </Descriptions.Item>
          <Descriptions.Item label="放号时间">
            {hosDetailData?.bookingRule.releaseTime}
          </Descriptions.Item>
          <Descriptions.Item label="停挂事件">
            {hosDetailData?.bookingRule.stopTime}
          </Descriptions.Item>
          <Descriptions.Item label="停号时间">
            {hosDetailData?.bookingRule.quitTime}
          </Descriptions.Item>
          <Descriptions.Item label="预约规则" span={2}>
            {hosDetailData?.bookingRule.rule.map(
              (item: string, index: number) => {
                return <p key={index}>{item}</p>;
              }
            )}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </div>
  );
}
